import { useSyncExternalStore } from 'react';

let store = {
  x: 0,
  y: 0
}

export default function ChatIndicator() {
  const store = useSyncExternalStore(subscribe, getSnapshot);
  return (
    <div>
      <div>{store.x}px</div>
      <div>{store.y}px</div>
    </div>
  )
}

function getSnapshot() {
  return store;
}


function subscribe(callback: any) {
  window.addEventListener('resize', (e: any) => {
    store = { x: e.currentTarget.outerWidth, y: e.currentTarget.outerHeight }
    callback()
  });
  return () => {
    console.log('xxx')
    window.removeEventListener('resize', callback);
  };
}
